<template>
  <div class='flex-container flex-column card-component-container pad20 line-height-32'>
    <div>
      问题类型：{{ typeFormatter(dataInner.quesType) }}
    </div>
    <div>
      问题描述：{{ dataInner.quesDesc }}
    </div>
    <div>
      图片：
      <div class='item-list pad20'>
        <div class="pic-box item" v-for='(item, index) in dataInner.picData'>
          <img class="pic" :src="item.picUrl" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dictList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      dataInner: {}
    }
  },
  watch: {
    data: {
      handler() {
        const dataInner = this.data || {}
        try {
          dataInner.picData = JSON.parse(dataInner.picData)
        } catch (e) { }
        this.dataInner = dataInner
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    typeFormatter(data) {
      return ((this.dictList || []).find(x => (x.value + '') === (data + '')) || {}).name || '-'
    }
  }
}
</script>

<style lang='less' scoped>
.card-component-container {
  border-color: rgb(233, 233, 233);
  border-width: 1px;
  border-style: solid;
  box-shadow: rgb(0 0 0 / 14%) 0px 1px 3px 0px;
  border-radius: 3px;
}
.item-list {
  width: 100%;
  /*height: min-content;*/
  display: flex;
  flex-wrap: wrap;
  .pic-box{
    position: relative;
    .pic{
      position: absolute;
      width: 100%;
      height: 100%;

    }
  }
  /* 正方形 */
  .item {
    width: 33%;
    padding-bottom: 33%;
    margin-right: 0.5%;
  }
  .item:nth-child(3n) {
    margin-right: 0;
  }
}

</style>